<?php
use yii\widgets\ActiveForm;
use yii\helpers\Html;
?>
<link rel="stylesheet" href="<?php echo Yii::getAlias("@web")?>/css/sky-forms.css">
<link rel="stylesheet" href="<?php echo Yii::getAlias("@web")?>/css/custom-sky-forms.css">
<div class="row">


<div class="col-md-9">
    <?php
    $form = ActiveForm::begin([
        'id' => 'category-form',
        'options' => ['class' => 'sky-form'],
    ])
    ?>
        <header>添加评论</header>

        <fieldset>
            <section>
                <label class="label">评论内容</label>
                <label class="input">
                    <input type="text" name="content">
                    <input type="hidden" value="<?php echo $id;?>" name="blog_id">
                </label>
            </section>



        </fieldset>


        <footer>
            <button class="btn-u" type="submit">评论</button>

        </footer>
    <?php ActiveForm::end() ?>
    <div class="profile-body">
        <div class="panel panel-profile">
            <div class="panel-heading overflow-h">
                <h2 class="panel-title heading-sm pull-left"><i class="fa fa-comments"></i>Users Comments</h2>
                <a href="#"><i class="fa fa-cog pull-right"></i></a>
            </div>
            <div class="panel-body margin-bottom-50">
                <?php foreach ($comment_list as $k=>$v){?>
                <div class="media media-v2">
                    <a href="#" class="pull-left">
                        <img height="50" width="50" alt="" src="<?php echo Yii::getAlias("@web");?>/images/img2.jpg" class="media-object rounded-x">
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading">
                            <?php echo $v->username;?>
                            <small><?php echo date("Y-m-d H:i:s",$v->addtime);?></small>
                        </h4>
                        <p><?php echo Html::encode($v->content);?></p>
                        <ul class="list-inline results-list pull-left">
                            <li><a href="#">25 Likes</a></li>
                            <li><a href="#">10 Share</a></li>
                        </ul>
                        <ul class="list-inline pull-right">
                            <li><a href="#"><i class="expand-list rounded-x fa fa-reply"></i></a></li>
                            <li><a href="#"><i class="expand-list rounded-x fa fa-heart"></i></a></li>
                            <li><a href="#"><i class="expand-list rounded-x fa fa-retweet"></i></a></li>
                        </ul>
                    </div>
                </div><!--/end media media v2-->
                <?php }?>

                <button class="btn-u btn-u-default btn-block" type="button">Load More</button>
            </div>
        </div>
    </div>
</div>
<div class="col-md-3">
    <div class="headline-v2 bg-color-light"><h2>Trending</h2></div>
    <!-- Trending -->
    <ul class="list-unstyled blog-trending margin-bottom-50">
        <li>
            <h3><a href="#">Proin dapibus ornare magna.</a></h3>
            <small>19 Jan, 2015 / <a href="#">Hi-Tech,</a> <a href="#">Technology</a></small>
        </li>
        <li>
            <h3><a href="#">Fusce at diam ante.</a></h3>
            <small>17 Jan, 2015 / <a href="#">Artificial Intelligence</a></small>
        </li>
        <li>
            <h3><a href="#">Donec quis consequat magna...</a></h3>
            <small>5 Jan, 2015 / <a href="#">Web,</a> <a href="#">Webdesign</a></small>
        </li>
    </ul>
    <!-- End Trending -->

    <div class="headline-v2 bg-color-light"><h2>Latest Posts</h2></div>
    <!-- Latest Links -->
    <ul class="list-unstyled blog-latest-posts margin-bottom-50">
        <li>
            <h3><a href="#">The point of using Lorem Ipsum</a></h3>
            <small>19 Jan, 2015 / <a href="#">Hi-Tech,</a> <a href="#">Technology</a></small>
            <p>Phasellus ullamcorper pellentesque ex. Cras venenatis elit orci, vitae dictum elit egestas a. Nunc nec auctor mauris, semper scelerisque nibh.</p>
        </li>
        <li>
            <h3><a href="#">Many desktop publishing packages...</a></h3>
            <small>23 Jan, 2015 / <a href="#">Art,</a> <a href="#">Lifestyles</a></small>
            <p>Integer vehicula sed justo ac dapibus. In sodales nunc non varius accumsan.</p>
        </li>
    </ul>
    <!-- End Latest Links -->

    <div class="headline-v2 bg-color-light"><h2>Tags</h2></div>
    <!-- Tags v2 -->
    <ul class="list-inline tags-v2 margin-bottom-50">
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Economy</a></li>
        <li><a href="#">Sport</a></li>
        <li><a href="#">Marketing</a></li>
        <li><a href="#">Books</a></li>
        <li><a href="#">Elections</a></li>
        <li><a href="#">Flickr</a></li>
        <li><a href="#">Politics</a></li>
    </ul>
    <!-- End Tags v2 -->

    <div class="headline-v2 bg-color-light"><h2>Photostream</h2></div>
    <!-- Photostream -->
    <ul class="list-inline blog-photostream margin-bottom-50">
        <li>
            <a title="Image 1" class="fancybox img-hover-v2" rel="gallery" href="assets/img/main/img22.jpg">
                <span><img alt="" src="assets/img/main/img22.jpg" class="img-responsive"></span>
            </a>
        </li>
        <li>
            <a title="Image 2" class="fancybox img-hover-v2" rel="gallery" href="assets/img/main/img23.jpg">
                <span><img alt="" src="assets/img/main/img23.jpg" class="img-responsive"></span>
            </a>
        </li>
        <li>
            <a title="Image 3" class="fancybox img-hover-v2" rel="gallery" href="assets/img/main/img4.jpg">
                <span><img alt="" src="assets/img/main/img4.jpg" class="img-responsive"></span>
            </a>
        </li>
        <li>
            <a title="Image 4" class="fancybox img-hover-v2" rel="gallery" href="assets/img/main/img9.jpg">
                <span><img alt="" src="assets/img/main/img9.jpg" class="img-responsive"></span>
            </a>
        </li>
        <li>
            <a title="Image 5" class="fancybox img-hover-v2" rel="gallery" href="assets/img/main/img25.jpg">
                <span><img alt="" src="assets/img/main/img25.jpg" class="img-responsive"></span>
            </a>
        </li>
        <li>
            <a title="Image 6" class="fancybox img-hover-v2" rel="gallery" href="assets/img/main/img6.jpg">
                <span><img alt="" src="assets/img/main/img6.jpg" class="img-responsive"></span>
            </a>
        </li>
        <li>
            <a title="Image 7" class="fancybox img-hover-v2" rel="gallery" href="assets/img/main/img20.jpg">
                <span><img alt="" src="assets/img/main/img20.jpg" class="img-responsive"></span>
            </a>
        </li>
        <li>
            <a title="Image 8" class="fancybox img-hover-v2" rel="gallery" href="assets/img/main/img3.jpg">
                <span><img alt="" src="assets/img/main/img3.jpg" class="img-responsive"></span>
            </a>
        </li>
        <li>
            <a title="Image 9" class="fancybox img-hover-v2" rel="gallery" href="assets/img/main/img7.jpg">
                <span><img alt="" src="assets/img/main/img7.jpg" class="img-responsive"></span>
            </a>
        </li>
    </ul>
    <!-- End Photostream -->
</div>
</div>